@import "../varibles";
@import "../mixins/mixin";

.vue-toast-mask{
	display: none;
	position: fixed;
	top:0;
	left:0;
	z-index: 10000;
	width:100%;
	height:100%;
	background-color: $toast_mask_bg_col;
	&.vue-toast-fade-in{
		display: block;
		animation:ToastFadeIn 0.6s ease;
	}
	&.vue-toast-fade-up{
		display: block;
		animation:ToastFadeUp 0.6s ease;
	}
	&.vue-toast-fade-down{
		display: block;
		animation:ToastFadeDown 0.6s ease;
	}
}

.vue-toast{
	position: absolute;
	text-align:center;
	background-color: $toast_bg_col;

	&.vue-toast-center{
		top:42%;
		width:80%;
		left:10%;
		padding:12px 15px;
	}
	&.vue-toast-top{
		width:100%;
		top:0;
		left:0;
		padding:12px 0;
	}

	&.vue-toast-bottom{
		width:100%;
		left:0;
		padding:12px 0;
		bottom:0;
	}
	
}

.vue-toast-text{
	color:$toast_text_col;
}

@keyframes ToastFadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

@keyframes ToastFadeUp{
	from{
		opacity: 0;
		transform:translate3d(0,80px,0);
	}
	to{
		opacity: 1;
		transform:translate3d(0,0,0);
	}
}

@keyframes ToastFadeDown{
	from{
		opacity: 0;
		transform:translate3d(0,-80px,0);
	}
	to{
		opacity: 1;
		transform:translate3d(0,0,0);
	}
}